<template>
  <div class="goodslist">
    <div class="search-box">
      <el-input placeholder="请输入内容" v-model="searchLang" class="input-with-select" @keyup.enter.native="searchGoods" style="width:300px;margin-right:10px;">
        <el-button slot="append" icon="el-icon-search" @click="searchGoods"></el-button>
      </el-input>
      <el-button type="success" plain @click="$router.push({path: 'add'})">添加用户</el-button>
    </div>
    <!-- 表单 -->
    <template>
      <el-table
        :data="goodList"
        stripe
        border
        style="width: 100%;margin-top: 15px">
        <el-table-column
          type="index"
          width="50">
        </el-table-column>
        <el-table-column
          prop="goods_name"
          label="商品名称"
          width="500">
        </el-table-column>
        <el-table-column
          prop="goods_price"
          label="商品价格（元）">
        </el-table-column>
        <el-table-column
          prop="goods_weight"
          label="商品重量">
        </el-table-column>
        <el-table-column
          label="创建时间">
          <template slot-scope="scope">
          {{scope.row.upd_time | setTime}}
          </template>
        </el-table-column>
        <el-table-column
          label="操作">
          <template>
            <el-tooltip class="item" effect="dark" content="编辑" placement="top">
              <el-button type="primary" icon="el-icon-edit" @click="getMessage"></el-button>
            </el-tooltip>
            <el-tooltip class="item" effect="dark" content="删除" placement="top">
              <el-button type="danger" icon="el-icon-delete" @click="getMessage"></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
    </template>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="10"
      layout="total, sizes, prev, pager, next, jumper"
      :total="goodsNum"
      style="background:#eeeeee;margin-top:15px;">
    </el-pagination>
  </div>
</template>

<script>
import {getGoodsList} from '@/api/index.js'
export default {
  data () {
    return {
      searchLang: '',
      goodList: [],
      currentPage: 1,
      goodsNum: 1,
      pageSize: 10
    }
  },
  mounted () {
    this.updatePage()
  },
  methods: {
    searchUser () {
      this.updatePage()
    },
    // 获取全部用户
    updatePage () {
      getGoodsList({query: this.searchLang, pagenum: this.currentPage, pagesize: this.pageSize}).then(res => {
        console.log(res)
        this.goodsNum = res.data.total
        this.goodList = res.data.goods
      })
    },
    handleSizeChange (val) {
      console.log(`每页 ${val} 条`)
      this.pageSize = val
      this.updatePage()
    },
    handleCurrentChange (val) {
      console.log(`当前页: ${val}`)
      this.currentPage = val
      this.updatePage()
    },
    searchGoods () {
      this.updatePage()
    },
    getMessage () {
      alert('暂无此功能')
    }
  },
  filters: {
    setTime (value) {
      value = value * 1000
      let date = new Date(value)
      let year = date.getFullYear()
      let month = date.getMonth() + 1
      let day = date.getDate()
      let hour = date.getHours()
      let minute = date.getMinutes()
      let second = date.getSeconds()
      return year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
